<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css三大特性</title>
</head>
<body>

  <!--css三大特性-->
  <!--
    1. 继承性
      元素是可以从上级元素继承相关样式。元素自带效果是不受继承影响的！比如：a 超链接的字体颜色，h1-h6字体大小

    2. 层叠性
      多个选择器有可能选择同一个元素，如果作用的样式不同，则全部会叠加显示（生效!）如果作用的样式相同，则取决于选择器的优先级

    3.优先级:
      作用范围越小，则优先级越高！   id>clas>元素【便签】>继承
  -->

  <!--元素定位方式-->
  <!--
    1. 静态定位【文档流定位】
        格式：position: static(默认)
        显示特点：块级元素从上往下排列， 行内元素从左往右排列
        如何移动元素：通过外边距margin移动

    2. 相对定位
        格式：position: relative
        显示特点：元素是不会脱离文档流的【不管元素移动到哪里，仍然占有原先的位置】
        如果移动元素： 通过修改 top \ bottom \ left \ right 让元素相对于初始位置做位置偏移

    3. 绝对定位
        格式：position：absolute
        显示特点：元素脱离文档流【只要元素修改为绝对定位，则它原先的位置会让出来！】
        如何移动元素：通过修改 top \ bottom \ left \ right 让元素相对于窗口位置或者上级元素
                【需要再上级元素中做相对定位】做位置偏移

    4. 固定定位
        格式：position: fixed
        显示特点： 元素脱离文档流【元素会固定在窗口的某个指定位置，不会随着内容变化而改变的！】
        如何移动元素: 通过修改 top \ bottom \ left \ right 让元素相对于窗口位置做位置偏移

   5. 浮动定位
        格式：position:
            float: left\right
        显示特点：脱离文档流，元素从当前行向左或者向右浮动，当撞到上级元素边框或者其他浮动元素时停止
        如果一行显示不下会自动换行，换行时有可能被卡住，如果元素得所有子元素全部浮动，则父级元素自动设别高度为 0
        如何移动元素： 通过外边距！

  -->




</body>
</html>